<html manifest="test.manifest">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<script>
</script>

<style>
  *{
    padding:0;
    margin:0;
  }
  html, body {
    height: 100%;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    user-select: none;
  }
  #titleBar{
    width: 100%;
    height:28px;
    line-height:28px;
    text-align: center;
    margin-bottom: 3px;
  }
  #warp{
    -webkit-app-region: drag;
    cursor: move;
    width:230px;
    height:230px;
    margin:40px auto;
  }
  #clock{
    -webkit-app-region: drag;
    cursor: move;
    width:200px;
    height:200px;
    border-radius:115px;
    border:15px solid #f96;
    background:white;
    position:relative;
  }
  #number div {
    width: 190px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 90px;
  }
  #number span {
    display: block;
    width: 20px;
    height: 20px;
  }
  .pointer {
    position: absolute;
    bottom: 90px;
    transform-origin: 50% 90%;
  }
  #houre {
    width: 5px;
    height: 60px;
    left: 98px;
    background: black;
  }
  #minute {
    width: 3px;
    height: 70px;
    left: 99px;
    background: gray;
  }
  #second {
    width: 1px;
    height: 80px;
    left: 100px;
    background: red;
  }
</style>

<body contextmenu="test_menu">
<menu type="context" id="test_menu">
  <menuitem label="调试器" onclick="lnks.DevTools.toggle(window)" ></menuitem>
  <menuitem label="刷新" onclick="location.href=location.href+'?t='+(new Date().getTime())" ></menuitem>
</menu>
<div id="warp" onmousedown="begin_move(event)">
  <!-- <div id="titleBar" onmousedown="begin_move(event)" style="background-color: rgba(255, 255, 255, 0);color:rgba(0, 0, 0, 0);">时钟</div> -->
  <div id="clock" onmousedown="begin_move(event)">
    <div id="number">
      <div><span>9</span></div>
      <div><span>10</span></div>
      <div><span>11</span></div>
      <div><span>12</span></div>
      <div><span>1</span></div>
      <div><span>2</span></div>
      <div><span>3</span></div>
      <div><span>4</span></div>
      <div><span>5</span></div>
      <div><span>6</span></div>
      <div><span>7</span></div>
      <div><span>8</span></div>
    </div>
    <div id="houre" class="pointer" ></div>
    <div id="minute" class="pointer" ></div>
    <div id="second" class="pointer" ></div>
  </div>
</div>
</body>

<script>
  const numberDivs = document.querySelectorAll('#number div');
  const numberSpans = document.querySelectorAll('#number span');

  // 布置钟盘
  for (let i = 0; i < numberDivs.length; i++) {
    numberDivs[i].style.transform = `rotate(${i * 30}deg)`;
  }
  // 纠正文字旋转偏移
  for (let j = 0; j < numberSpans.length; j++) {
    numberSpans[j].style.transform = `rotate(${j * -30}deg)`;
  }

  // 渲染时钟
  function render() {
    const oHoure = document.querySelector('#houre');
    const oMinute = document.querySelector('#minute');
    const oSecond = document.querySelector('#second');

    const nowTime = new Date();
    const nowHoure = nowTime.getHours();
    const nowMinute = nowTime.getMinutes();
    const nowSecond = nowTime.getSeconds();

    // 计算旋转度数
    const hourDeg =
            nowHoure * 30 +
            nowMinute * (360 / 12 / 60) +
            nowSecond * (360 / 12 / 60 / 60);
    const minuteDeg = nowMinute * (360 / 60) + nowSecond * (360 / 60 / 60);
    const secondDeg = nowSecond * (360 / 60);

    oHoure.style.transform = `rotate(${hourDeg}deg)`;
    oMinute.style.transform = `rotate(${minuteDeg}deg)`;
    oSecond.style.transform = `rotate(${secondDeg}deg)`;
  }
  function begin_move(e) {
    if (window.lnks) {
      this.win = new window.lnks.MainWindow(window);
      //避免titlebar上的按钮点击事件被吃掉
      if (e.currentTarget != e.target) return false;
      this.win.begin_move(e, this);
    } else {
      console.log("window.lnks none");
    }
  }
  render();
  function showTitleBar() {
    let titleBar = document.querySelector('#titleBar');
    titleBar.style="background-color: rgba(255, 255, 255, 0.8);color:rgba(0, 0, 0, 0.8)";
  }
  function hideTitleBar() {
    setTimeout(()=>{
      let titleBar = document.querySelector('#titleBar');
      titleBar.style="background-color: rgba(255, 255, 255, 0);color:rgba(0, 0, 0, 0);";
    }, 3000);
  }
  // warp = document.querySelector('#warp');
  // warp.addEventListener("mouseleave", hideTitleBar);
  // warp.addEventListener("mouseover", showTitleBar);
  // 每隔1s进行一次渲染
  setInterval(render, 1000);
</script>

</html>